<template>
    <el-row style="min-height: 400px;">
        <el-col :span="12">
            <el-cascader-panel ref="panel" v-if="isShowCascader" @change="methods.getCascader" :options="categoryList.records" :props="settings" style="min-height: 400px;"/>
                <!-- <template #default="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf"> () </span>
                </template> -->
            <!-- </el-cascader-panel> -->

            <!-- {{categoryList.records.length}} -->
        </el-col>
        <el-col :span="12">
            <el-table :data="selectedList" style="width: 100%">
            <el-table-column prop="name" label="已选" width="180" />
            <!-- <el-table-column fixed="right" label="数量" width="180" align="center" >
                <template #default="scope">
                    <el-input-number :model-value="scope.row.count" :min="1" :max="100" />
                </template>
            </el-table-column> -->
            </el-table>
            
        </el-col>
    </el-row>
    <el-button style="margin-top:10px" @click="methods.send" > 确定 </el-button>
</template>
<script lang="ts">
import { categoryAllList, categoryListByType } from "@/api/CategoryManage";
import { dishByCategoryId } from "@/api/DishManage";
import { CategoryListItem, CategoryListResForm, DishByCategoryReqForm, SetmealCascaderItem } from "@/entity/entityDefine";
import { defineComponent, nextTick, reactive, ref, toRefs } from "vue";

export default defineComponent({
  emits: ['fatherFun'], // 避免vue3 emit 报错
  name: "SeamealDishSelect",
  props: {
    msg: String,
    title: String,
  },
  mounted(){
    // 页面加载时获取 分类数据
    this.methods.requestData();
  },
  setup(props, { emit , expose}) {

    let panel = ref();
    let isShowCascader = ref(false);
    let selectedList = ref([
        {
            name: "",
            id: "",
            count:1,
            price:0
        }
    ]);
    // let selectedTableList:string[] = reactive([]);

    const settings = {
    //  expandTrigger: 'hover',
     multiple:true,
     label: 'name',
     value: 'id',
     checkStrictly:true,
     lazy: true,
     async lazyLoad(node:any, resolve:any) {

        console.log("clicked")
        console.log(node);
        console.log(node.data.id);
        const id:string = node.data.id
        if (node.level === 1) {
            //
            let param: DishByCategoryReqForm = {
                categoryId: id
            }

            const { code, msg, data } = await dishByCategoryId(param);
            if (code == 200) {
            //
            let res = data!;
            
            let showList:SetmealCascaderItem[] = []
            res.records.forEach((item)=>{
                //
                let showItem:SetmealCascaderItem = {
                    id:item.name + ":" + item.id + ":" + item.price,
                    name:item.name,
                    leaf:true
                }
                showList.push(showItem);
            });
            resolve(showList)

            } else {
            // 网络层已提示信息
            // console.log(msg);
            }
        }

        // setTimeout(() => {
        // const nodes = Array.from({ length: level + 1 }).map((item) => ({
        //     value: ++id,
        //     label: `Option - ${id}`,
        //     leaf: level >= 2,
        // }))
        // // Invoke `resolve` callback to return the child nodes data and indicate the loading is finished.
        // resolve(nodes)
        // }, 1000)
    },
    }

    let categoryList:CategoryListResForm = reactive({
        records : [
            
        ],
        total:0,
        size:0,
        current:0,
        pages:0,
        searchCount:0
    });

    expose = () => {
      //
      methods;
    };
    
    const methods = {
        async requestData() {
        
        const { code, msg, data } = await categoryAllList();

        if (code == 200) {
          //
          isShowCascader.value = true;
          let res = data!;
          categoryList.records = res.records;

        } else {
          // 网络层已提示信息
          // console.log(msg);
        }
      },

      getCascader(value:(string[])[]) {
        //
        selectedList.value = [];
        console.log("获取数据 ",value);
        if (value){
            // 
            value.forEach((item)=>{
                // 
                if (item.length > 1) {
                    let data = item[1];
                    let arr = data.split(":")
                    selectedList.value.push({
                        name:arr[0],
                        id:arr[1],
                        count:1,
                        price:Number(arr[2])
                    });
                }
            })
        }
        console.log("最终数据 ",selectedList);
      },

      reload(){
        isShowCascader.value = false;
        selectedList.value = [];
        nextTick(() => {
            isShowCascader.value = true;
        });
      },

      send() {
        emit("fatherFun", selectedList); // 第一个参数是子组件派发的函数名(子传父是通过函数事件派发)
      }
    }

    return {
        methods,
        settings,
        categoryList,
        selectedList,
        isShowCascader,
        panel
    }
  }
}
)
</script>

<style>
.el-cascader-menu__wrap.el-scrollbar__wrap {
    height: 400px;
}
</style>